<template>
  <div>
    <!--地址卡片-->
    <div v-if="editable===true" class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add" @click="showList = true">
      <van-icon :name="leftIconName" class="van-cell__left-icon"></van-icon>
      <div v-if="chosenAddressId === ''" class="van-cell__value van-cell__value--alone van-contact-card__value">添加地址</div>
      <div v-else class="van-cell__value van-cell__value--alone van-contact-card__value" style="line-height: 20px">
        <div>{{ nameAndTel }}</div>
        <div>{{ specificAddress }}</div>
      </div>
      <van-icon class="van-icon van-icon-arrow van-cell__right-icon"></van-icon>
    </div>
    <div v-else class="van-cell van-cell--center van-cell--borderless van-cell--clickable van-contact-card van-contact-card--add">
      <van-icon name="location" class="van-cell__left-icon"></van-icon>
      <div class="van-cell__value van-cell__value--alone van-contact-card__value" style="line-height: 20px">
        <div>{{ nameAndTel }}</div>
        <div>{{ specificAddress }}</div>
      </div>
    </div>

    <!-- 地址列表 -->
    <van-popup v-model="showList" position="bottom">
      <van-address-list v-model="chosenAddressId" :list="list" @add="onAdd" @edit="onEdit" @select="onSelect"/>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'addressCard',
  props: {
    editable: Boolean, // 地址是否可编辑
    addressId: String // 指定地址id
  },
  data () {
    return {
      leftIconName: 'add-square', // 地址卡片左侧图标名
      nameAndTel: '', // 姓名和电话
      specificAddress: '', // 具体地址
      chosenAddressId: '', // 选中的地址id
      list: [], // 地址列表
      showList: false // 地址列表显示标志位
    }
  },
  methods: {
    /**
     * 根据用户openId获取其收货地址列表
     */
    getShopUserAddressListByOpenId (openId) {
      const self = this
      const param = { openId: openId }
      self.axios.get('api/shop/getShopUserAddressListByOpenId', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          resp.data.data.forEach(item => {
            let obj = {}
            obj.id = item.id
            obj.name = item.receiveName
            obj.tel = item.receivePhone
            obj.province = item.province
            obj.city = item.city
            obj.county = item.county
            obj.areaCode = item.areaCode
            obj.address = item.address
            obj.postalCode = item.postalCode
            obj.isDefault = item.isDefault
            this.list.push(obj)
          })
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 根据openId查询默认收货地址
     */
    getDefaultAddressByOpenId (openId) {
      const self = this
      const param = { openId: openId }
      self.axios.get('api/shop/getDefaultAddressByOpenId', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          if (resp.data.data !== null) {
            this.chosenAddressId = resp.data.data.id
            this.leftIconName = 'location'
            this.nameAndTel = resp.data.data.receiveName + '，' + resp.data.data.receivePhone
            this.specificAddress = resp.data.data.province + ' ' + resp.data.data.city + ' ' + resp.data.data.county + ' ' + resp.data.data.address
          }
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 根据id查询收货地址
     */
    getAddressById (id) {
      const self = this
      const param = { id: id }
      self.axios.get('api/shop/getAddressById', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          if (resp.data.data !== null) {
            this.chosenAddressId = resp.data.data.id
            this.nameAndTel = resp.data.data.receiveName + '，' + resp.data.data.receivePhone
            this.specificAddress = resp.data.data.province + ' ' + resp.data.data.city + ' ' + resp.data.data.county + ' ' + resp.data.data.address
          }
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 新增地址
     */
    onAdd () {
      this.$router.push({ name: 'addressEdit' })
    },
    /**
     * 编辑地址
     */
    onEdit (item) {
      this.$router.push({ name: 'addressEdit', query: item })
    },
    /**
     * 选中地址
     */
    onSelect (item) {
      this.chosenAddressId = item.id
      this.leftIconName = 'location'
      this.nameAndTel = item.name + '，' + item.tel
      this.specificAddress = item.province + ' ' + item.city + ' ' + item.county + ' ' + item.address
      this.showList = false
    }
  },
  mounted () {
    const self = this
    if (self.addressId !== undefined && self.addressId !== '') {
      // 根据id查询收货地址
      self.getAddressById(self.addressId)
    } else {
      // 获取当前用户openId
      let openId = self.$store.state.openId
      // 根据openId查询其收货地址列表
      self.getShopUserAddressListByOpenId(openId)
      // 根据openId查询默认收货地址
      self.getDefaultAddressByOpenId(openId)
    }
  }
}
</script>

<style lang="less" scoped>
.van-address-list {
  box-sizing: border-box;
  height: 100%;
  padding-bottom: 51px;
}
</style>
